<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>app html</title>
    <link rel="stylesheet" href="css/tree.css">
    <link rel="stylesheet" href="css/fontawesome/css/font-awesome.min.css">
</head>
<body ng-app="myapp">

<h2>Hello app page.</h2>

<div ng-controller="addressctrl">
    <div class="tree">
        <ul>
           <li ng-repeat="address in tree.$data">
               <div>
                   <input type="checkbox" ng-model="address.checked" ng-change="tree.check(address)" ng-class="{'intermediate': tree.isSemiChecked(address)}">
                   <span ng-bind="address.label"></span>
                   <i class="fa" ng-class="address.folded?'fa-plus':'fa-minus'" ng-click="tree.toggleFold(address)"></i>
               </div>
               <ul ng-hide="address.folded">
                   <li ng-repeat="city in address.items">
                       <div>
                           <input type="checkbox" ng-model="city.checked" ng-change="tree.check(city)" ng-class="{'intermediate': tree.isSemiChecked(city)}">
                           <span ng-bind="city.label"></span>
                           <i ng-if="city.items" class="fa" ng-class="city.folded?'fa-plus':'fa-minus'" ng-click="tree.toggleFold(city)"></i>
                       </div>
                       <ul ng-hide="city.folded">
                           <li ng-repeat="area in city.items">
                               <label>
                                   <input type="checkbox" ng-model="area.checked" ng-change="tree.check(area)">
                                   <span ng-bind="area.label"></span>
                               </label>
                           </li>
                       </ul>
                   </li>
               </ul>
           </li>
        </ul>

        <p>
            <button ng-click="getCheckedChildren()">获取已选择的数据</button>
            <ul class="list-inline">
                <li ng-repeat="c in checkeds"><span ng-bind="c.label"></span></li>
            </ul>
        </p>
    </div>
</div>

</body>
<script src="js/angular.js"></script>
<script src="js/app.js"></script>
</html>